<!--
 * @Author: 蒋好东
 * @Date: 2023-08-10 10:54:49
 * @LastEditTime: 2023-08-10 14:09:08
 * @FilePath: \tcdm-process-console\src\views\eqpt\cartManager\ceshi.vue
-->
<template>
  <div style="position: relative">
    <transition-group name="telloryOne">
      <!-- 左抽屉 -->
      <div v-show="visible" class="drawer" key="1">
        <!-- 标题 -->
        <div class="title">
          <span>手推车管理</span>
        </div>
        <!-- 表单 -->
        <div class="content">
          <FilterBar
            ref="FilterRef"
            :close-collapse="true"
            :filters="tableOptionOne"
            @search-change="onSearch"
            :table-data="tableData"
            @search-reset="onReset"
            has-button />
        </div>
        <!-- 分割线 -->
        <el-divider style="width: 90%; margin: 20px auto 0; padding: 0" />
        <!-- 表格 -->
        <div class="c-tab">
          <TableCommon
            style="width: 100%; color: #000; font-size: 14px; height: 180px"
            :pagination="false"
            :columns="trolleyColumns"
            size="small"
            :table-data="tableData" />
        </div>
      </div>
      <img
        :class="visible ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
        :src="visible ? image.arrowLeft : image.arrowRight"
        key="2"
        style="float: left"
        @click="visible = !visible" />
      <el-radio-group
        v-model="layer"
        :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'">
        <el-radio-button
          v-for="(area, index) in areaDetail"
          :key="index"
          :label="area.buildName"
          @change="showFloor(area.floorDesc)">
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>
      <el-radio-group
        v-model="subLayer"
        v-if="hasSub"
        :class="visible == true ? 'btn_d subLayer' : 'btn_c subLayer'">
        <el-radio-button
          v-for="(area, index) in subLayers"
          :key="index"
          :label="area.buildName"
          @change="switchMap(area.name)">
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>
    </transition-group>

    <transition-group name="telloryTwo">
      <!-- 右抽屉 -->
      <div v-show="visiblea" class="drawera" key="3">
        <!-- 标题 -->
        <div class="title">
          <span>手推车数量告警记录</span>
        </div>
        <!-- 表单 -->
        <div class="content">
          <FilterBar
            ref="FilterRef"
            :close-collapse="true"
            :filters="tableOptionTwo"
            @search-change="onSearch"
            :table-data="tableData"
            @search-reset="onReset"
            has-button />
        </div>
        <!-- 分割线 -->
        <el-divider style="width: 90%; padding: 0" />
        <!-- 情况模块 -->
        <div class="titleNumMsg">
          <div class="num">累计告警<span>31</span></div>
          <div class="num">手推车使用数量<span>132</span></div>
          <div class="num">用户数量<span>132</span></div>
        </div>

        <!-- 图片文字卡片模块 -->
        <!-- 拿到查询的数据遍历即可 -->
        <div v-for="i in 3" :key="i" class="valueCard">
          <!-- 网图，换成自己请求的数据 -->
          <img
            src="http://q1.qlogo.cn/g?b=qq&nk=3521698621&s=100&t=1547904810"
            alt=""
            class="c-img" />
          <div class="situationText">
            <span class="s-text-o">南指廊A区数量低于阈值</span>
            <div class="s-spn-o">
              <span>告警区域:</span>
              <p>T3航站楼 F3 A区</p>
            </div>
            <div class="s-spn-o">
              <span>发生时间:</span>
              <p>2023-03-03 13:40</p>
            </div>
            <div class="s-spn-o">
              <span>监控来源:</span>
              <p>0023号摄像头</p>
            </div>
          </div>
        </div>
      </div>
      <img
        :class="visiblea ? 'btn_aa btnRight btn-t' : 'btn_bb btnRight btn-t'"
        :src="visiblea ? image.arrowRight : image.arrowLeft"
        key="4"
        style="float: right"
        @click="visiblea = !visiblea" />
      <!-- 右抽屉关闭的卡片 -->
      <div
        :class="
          visiblea == true ? 'mapLegend_a mapLegend' : 'mapLegend_b mapLegend'
        ">
        <div style="line-height: 32px;">
          <span>图例</span>
          <span v-if="!visiblea">区域图层</span>
          <el-switch v-model="switchValue" @click="switchArea" class="sw" size="small" v-if="!visiblea" />
        </div>
        <div class="legendBox">
          准入区
          <div
            class="legend"
            style="background: #bad4fb; border: 1px solid #2f7df1" />
        </div>
        <div class="legendBox">
          禁入区
          <div
            class="legend"
            style="background: #f1a4ad; border: 1px solid #da0d26" />
        </div>
        <div class="legendBox">
          选中区域
          <div
            class="legend"
            style="background: #fbdbb0; border: 1px solid #f59f2e" />
        </div>
        <div v-if="!visiblea" class="legendBox">
          正常手推车
          <div class="blue" />
        </div>
        <div class="legendBox">
          报警点位
          <img :src="image.flashing" class="red" />
        </div>
      </div>
    </transition-group>
  </div>

  <!-- 地图
  <map-control @mapClick="mapClick"></map-control>-->
  <map-control></map-control>
</template>

<script lang="ts" setup>
import FilterBar from '@/components/FilterBar/index.vue'
import { ref } from 'vue'
import TableCommon from '@/components/TableCommon/index.vue'
import {
  tableOptionOne,
  tableOptionTwo
} from '@/views/eqpt/cartManager/config/filters'
import { areaDetail } from '@/config/config'
import { trolleyColumns } from '@/views/eqpt/cartManager/config/columns'
// 以下3个为地图控件相关的组件
import mapControl from '@/components/map/index.vue'
import { store } from '@/components/map/mapStore'
import { image } from '@/assets/index'
import { Cloudy, Moon } from '@element-plus/icons-vue'
import { ElButton, ElTooltip } from 'element-plus'

console.log(image.flashing)

// 左抽屉的显示与隐藏参数
const visible = ref(true)
// 右抽屉的显示与隐藏参数
const visiblea = ref(false)
// 右抽屉左下角卡片参数
const visibleb = ref(false)

// 用于保存机场层级
const layer = ref()
// 用于保存选择的机场子层级
const subLayer = ref()
// 用于保存机场子层级数组
const subLayers = ref([])
// 是否显示机场子层级
const hasSub = ref(false)
// 用于保存地图坐标及相关信息
const mapPoint = ref({})
// 地图点击事件--本页面暂未使用，留着备份
const mapClick = (evt: any) => {
  console.log(evt.mapPoint.x, evt.mapPoint.y)
  // 点位坐标 longitude：evt.mapPoint.x  latitude：evt.mapPoint.y
  // 区域字段在地图数据中暂时没有
  // 移除临时图层
  store.BNMap.removeGraphicsLayer('clickLayer')
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: 'clickLayer' })
  clickLayer.removeAll()
  // 创建点
  const point = store.BNMap.createPoint({
    x: evt.mapPoint.x,
    y: evt.mapPoint.y,
    spatialReference: evt.mapPoint.spatialReference
  })
  store.BNMap.setCenter(point)
  // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.flashing, 12, 12)
  // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle)
  // 添加到地图
  clickLayer.add(picgraphic)
  store.BNMap.addGraphicsLayer(clickLayer)
  // 将相关信息保存到变量
  mapPoint.value.x = evt.mapPoint.x
  mapPoint.value.y = evt.mapPoint.y
  // 地图区域值暂时为空
}

// console.log(image.flashing)


// 表格数据，后期接口数据获取
const tableData = ref([
  {
    area: '出港登机桥入口',
    trolleyNum: '18',
    lowestValue: '20'
  },
  {
    area: '进港航班到达厅出口',
    trolleyNum: '15',
    lowestValue: '10'
  },
  {
    area: '交通楼大厅',
    trolleyNum: '13',
    lowestValue: '10'
  },
  {
    area: '南指廊A区',
    trolleyNum: '11',
    lowestValue: '10'
  }
])

/**
 * 选择地图大体区域方法
 * @param val
 */
const showFloor = (val: string[]) => {
  if (typeof val !== 'undefined') {
    subLayers.value = val
    hasSub.value = true
  } else {
    hasSub.value = false
  }
}

/**
 * 数据加载
 * author：靳从毅
 * date：2023/8/23
 */
// switchValue 切换图层按钮绑定值
const switchValue = ref(false)
// 模拟区域图层切换加载区域
const switchArea = () => {
  if (switchValue.value) {
    switchMap('咸阳T5F2')
  } else {
    switchMap('咸阳T5F3')
  }
}

/**
 * 选择地图区域分支方法
 * @param name
 */
const switchMap = (name: string) => {
  console.log(store.BNMap.switchDCJ)
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
    console.log(evt)
    console.log('回调')
  })
}
</script>
<style>

</style>
<style lang="less" scoped>
.dialog {
  pointer-events: none;
}

.dialog .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}
/* 进入动画 */
.telloryOne-enter-active {
  animation: telloryOne 1s;
  animation-timing-function: linear;
}

.telloryOne-leave-active {
  animation: telloryOne 1s reverse;
  animation-timing-function: linear;
}

@keyframes telloryOne {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translate(0);
  }
}

.c-tab {
  width: 92%;
  height: 40px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  /deep/ .cell {
    padding: 0;
  }
  /deep/ span.caret-wrapper {
    width: 10px;
  }
}

.drawer {
  width: 320px;
  height: 85vh;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
  font-size: 10px;
}

.drawer > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;

  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2f7df1 1px solid;
    text-indent: 1em;
    font-weight: 550;
    font-size: 14px;
  }
}

.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}

.drawer > .content {
  line-height: 32px;
  height: 180px;
  margin-bottom: 10px;
  padding: 0 15px 15px;
  position: relative;

  /deep/ .el-form-item__label {
    text-align: left;
    width: 85px !important;
    padding: 0;
    display: inline-block;
  }

  /deep/ .el-form-item {
    margin-bottom: 5px;
  }

  /deep/ .filter-wrapper {
    display: inline-block;
  }

  /deep/ .button-group {
    width: 100%;
    position: absolute;
    top: 160px;
    display: flex;
    justify-content: center;
  }

  /deep/ .el-picker__popper {
    z-index: 9999;
  }
}

.msgList {
  padding: 10px 0 10px 10px;
  overflow-y: scroll;
  height: 580px;
}

.msgList::-webkit-scrollbar {
  display: none;
}

.listDiv {
  border: #d7d7d7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;

  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }

  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }

  .top span img {
    margin-top: 2px;
  }

  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }

  .top span:last-child {
    float: right;
    text-align: right;
  }

  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }

  .list::-webkit-scrollbar {
    display: none;
  }
}

.subLayer {
  position: absolute;
  width: 35px;
  top: 50px;
  border: 0;
}

.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}

.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}

.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}

.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 3px;
  padding-right: 3px;
  object-fit: none;
  z-index: 999;
}

.btn_d {
  left: 340px;
}

.btn_c {
  left: 10px;
}

.btn_b {
  left: 0;
}

// 右抽屉css
.telloryTwo-enter-active {
  animation: telloryTwo 1s;
  animation-timing-function: linear;
}

.telloryTwo-leave-active {
  animation: telloryTwo 1s reverse;
  animation-timing-function: linear;
}

@keyframes telloryTwo {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.drawera {
  width: 400px;
  height: 85vh;
  padding: 10px 0;
  margin-top: 5px;
  margin-right: 10px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  background-color: #fff;
  float: right;
  font-size: 10px;
  z-index: 999;

  /deep/ .el-divider {
    margin: 0px auto;
  }
}

.drawera > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;

  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2f7df1 1px solid;
    text-indent: 1em;
    font-weight: 550;
    font-size: 14px;
  }
}

.titleNumMsg {
  text-indent: 1em;
  margin-top: 10px;
  height: 20px;
  line-height: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;

  .num {
    display: inline-block;
    float: left;
    font-size: 14px;
    padding-right: 9px;

    span {
      text-indent: 5px;
      height: 20px;
      margin-top: -3px;
      display: inline-block;
      vertical-align: middle;
      font-size: 18px;
      line-height: 20px;
      font-weight: bolder;
      border: 0;
      color: #2f7df1;
    }
  }

  .num:not(:first-child) {
    border-left: 1px solid #ddd;
  }
}

.drawera > .content {
  line-height: 32px;
  height: 70px;
  margin-bottom: 10px;
  padding: 0 15px 15px;
  position: relative;

  /deep/ .el-form-item__label {
    text-align: left;
    width: 85px !important;
    padding: 0;
    display: inline-block;
  }

  /deep/ .el-form-item {
    margin-bottom: 5px;
  }

  /deep/ .filter-wrapper {
    display: inline-block;
  }

  /deep/ .button-group {
    width: 135px;
    position: absolute;
    top: 37px;
    right: 18px;
  }
}

.drawera .situation {
  display: flex;
  width: 90%;
  height: 50px;
  // background-color: #2F7DF1;
  margin: 0 auto;

  .accumulate {
    width: 28%;
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      display: inline-block;
    }

    p {
      font-size: 18px;
      color: #2f7df1;
      display: inline-block;
      margin-left: 8px;
    }
  }

  .cartNum {
    width: 44%;
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      display: inline-block;
      padding-left: 8px;
      border-left: #d7d7d7 1px solid;
    }

    p {
      font-size: 18px;
      color: #2f7df1;
      display: inline-block;
      margin-left: 8px;
    }
  }

  .userNum {
    width: 28%;
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      display: inline-block;
      padding-left: 8px;
      border-left: #d7d7d7 1px solid;
    }

    p {
      font-size: 18px;
      color: #2f7df1;
      display: inline-block;
      display: flex;
      margin-left: auto;
    }
  }
}

.drawera .valueCard {
  display: flex;
  width: 90%;
  height: 136px;
  // background-color: #2F7DF1;
  margin: 0px auto 15px;
  border: #d7d7d7 1px solid;
  border-radius: 3px;

  .c-img {
    height: 110px;
    width: 115px;
    margin: 13px;
    border-radius: 6px;
  }

  .situationText {
    height: 100%;
    width: 100%;
    // background-color: #2F7DF1;
    // position: relative;

    .s-text-o {
      // position: absolute;
      font-size: 18px;
      font-weight: 550;
      margin-top: 9px;
      width: 100%;
      display: flex;
    }

    .s-spn-o {
      font-size: 13px;
      width: 100%;
      margin-top: 10px;

      span {
        color: #d7d7d7;
        display: inline-block;
      }

      p {
        margin-left: 20px;
        display: inline-block;
      }
    }
  }
}

.btn_a {
  left: 330px;
}

.btn-t {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 3px;
  padding-right: 3px;
  object-fit: none;
  z-index: 999;
}

.btn_bb {
  right: 0px;
}

.btn_aa {
  right: 410px;
}

.mapLegend {
  padding: 10px;
  width: 145px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;
  z-index: 2222;

  .sw {
    // position: relative;
    margin-top: -3px; 
    
    // margin-left: 5px;
  }

  .legendBox {
    margin-bottom: 8px;
    line-height: 24px;

    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }

    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }

    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      width: 20px;
      height: 20px;
    }
  }

  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }

  span:first-child {
    font-weight: bolder;
    width: 59.8px;
    margin-top: 2px;
    border-left: 2px solid #2f7df1;
    text-indent: 10px;
  }
}

.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}

.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(85vh - 144px);
}

.mapLegend_b {
  height: 190px;
  right: 10px;
  top: calc(85vh - 185px);
}

.trolleyRed {
  position: relative;
  cursor: pointer;

  .item-red {
    position: absolute;
    background-color: #da0d26;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    top: 500px;
    left: 60%;
    z-index: 888;
  }

  /deep/ .el-popper {
    z-index: 222;
  }
}

.box-item {
  font-size: 14px;
  height: 20px;
  width: 300px;
  z-index: 888;

  /deep/ .is-light {
    position: absolute;
    z-index: 222;
  }
}
</style>
